<template>
  <div class="page-container">
    <a-tabs default-active-key="1" lazy-load @change="tabsChange">
      <a-tab-pane key="1" title="车辆库存">
        <CarStock ref="carStockRef" />
      </a-tab-pane>
      <a-tab-pane key="2" title="车型库存">
        <CarModalStock ref="carModalStockRef" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
  import { nextTick, ref } from 'vue'
  import CarStock from './car/index.vue'
  import CarModalStock from './car-model/index.vue'

  export default {
    name: 'CarStockManage',
    components: {
      CarStock,
      CarModalStock,
    },
    setup() {
      const carStockRef = ref()
      const carModalStockRef = ref()

      const tabsChange = (key: string) => {
        nextTick(() => {
          if (key == '1') {
            const queryParam = carModalStockRef.value.getQueryParam()
            queryParam.dateRange = [queryParam.startTime, queryParam.endTime]
            carStockRef.value.syncQueryParam(queryParam)
            carStockRef.value.loadData()
          } else {
            const queryParam = carStockRef.value.getQueryParam()

            queryParam.dateRange = [queryParam.startTime, queryParam.endTime]
            carModalStockRef.value.syncQueryParam(queryParam)
            carModalStockRef.value.loadData(true)
          }
        })
      }
      return {
        carStockRef,
        carModalStockRef,
        tabsChange,
      }
    },
  }
</script>
